<template>
	<view class="container">
		<view class="background">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
			<view class="circle circle-4"></view>
			<view class="particle particle-1"></view>
			<view class="particle particle-2"></view>
			<view class="particle particle-3"></view>
		</view>

		<scroll-view class="scroll-container" scroll-y="true" :show-scrollbar="false">
			<view class="content-wrapper">
				<!-- Logo部分 -->
				<view class="logo-section">
					<view class="logo">
						<view class="logo-icon-wrapper">
							<text class="logo-icon">📚</text>
						</view>
						<text class="logo-text">高校学习资源管理平台</text>
						<text class="logo-subtitle">Knowledge · Innovation · Excellence</text>
					</view>
				</view>

				<!-- 表单卡片 -->
				<view class="form-card">
					<view class="form-header">
						<view class="header-decoration">
							<view class="decoration-line"></view>
							<text class="title">欢迎登录</text>
							<view class="decoration-line"></view>
						</view>
						<text class="subtitle">开启智慧学习之旅</text>
					</view>

					<view class="form-content">
						<view class="input-group">
							<view class="input-item">
								<view class="input-icon-wrapper">
									<text class="input-icon">👤</text>
								</view>
								<input class="input" v-model="username" placeholder="请输入学号" placeholder-class="placeholder" />
								<view class="input-underline"></view>
							</view>
							<view class="input-item">
								<view class="input-icon-wrapper">
									<text class="input-icon">🔒</text>
								</view>
								<input class="input" v-model="password" password placeholder="请输入密码"
									placeholder-class="placeholder" />
								<view class="input-underline"></view>
							</view>
						</view>

						<!-- 身份选择器 -->
						<view class="role-selector">
							<text class="role-label">选择身份</text>
							<view class="role-options">
								<view class="role-option" :class="{ active: userRole === 'student' }"
									@click="userRole = 'student'">
									<view class="role-icon-wrapper">
										<text class="role-icon">🎓</text>
									</view>
									<text class="role-text">学生</text>
									<view class="role-check">
										<view class="check-dot"></view>
									</view>
								</view>
								<view class="role-option" :class="{ active: userRole === 'admin' }" @click="userRole = 'admin'">
									<view class="role-icon-wrapper">
										<text class="role-icon">👨‍💼</text>
									</view>
									<text class="role-text">管理员</text>
									<view class="role-check">
										<view class="check-dot"></view>
									</view>
								</view>
							</view>
						</view>

						<!-- 按钮组 -->
						<view class="button-group">
							<button class="login-btn" type="primary" @click="handleLogin">
								<text class="btn-text">立即登录</text>
								<view class="btn-arrow">→</view>
							</button>

							<button class="change-btn" @click="navigateToChange">
								<text class="btn-text">修改密码</text>
								<view class="btn-icon">🔑</view>
							</button>
						</view>

						<view class="form-footer">
							<text class="footer-text">遇到问题？</text>
							<text class="footer-link">联系管理员</text>
						</view>
					</view>
				</view>

				<!-- 功能特性展示 -->
				<view class="features-section">
					<text class="features-title">平台特色功能</text>
					<view class="features-grid">
						<view class="feature-item">
							<view class="feature-icon">📖</view>
							<text class="feature-text">课程资源</text>
						</view>
						<view class="feature-item">
							<view class="feature-icon">📊</view>
							<text class="feature-text">学习分析</text>
						</view>
						<view class="feature-item">
							<view class="feature-icon">👥</view>
							<text class="feature-text">协作学习</text>
						</view>
						<view class="feature-item">
							<view class="feature-icon">📱</view>
							<text class="feature-text">多端同步</text>
						</view>
					</view>
				</view>

				<!-- 统计数据 -->
				<view class="stats-section">
					<view class="stat-item">
						<text class="stat-number">5000+</text>
						<text class="stat-label">学习资源</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">10000+</text>
						<text class="stat-label">注册用户</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">98%</text>
						<text class="stat-label">用户满意度</text>
					</view>
				</view>

				<!-- 底部信息 -->
				<view class="footer-section">
					<text class="copyright">© 2024 高校学习资源管理平台 版权所有</text>
					<view class="footer-links">
						<text class="footer-link-item">用户协议</text>
						<text class="footer-link-item">隐私政策</text>
						<text class="footer-link-item">帮助中心</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				userRole: 'student'
			}
		},
		methods: {
			handleLogin() {
				if (!this.username || !this.password) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
					return
				}

				// 根据身份验证
				if (this.userRole === 'student') {
					if ((this.username === 'Holmes' && this.password === '4869') ||(this.username === '1' && this.password === '1')) {
						this.performLogin();
					} else {
						uni.showToast({
							title: '学号或密码错误',
							icon: 'none'
						})
					}
				} else if (this.userRole === 'admin') {
					if (this.username === 'admin' && this.password === 'admin123') {
						this.performLogin();
					} else {
						uni.showToast({
							title: '管理员账号或密码错误',
							icon: 'none'
						})
					}
				}
			},
			performLogin() {
				uni.showLoading({
					title: '登录中...'
				})
				setTimeout(() => {
					uni.hideLoading()
					uni.switchTab({
						url: "/pages/tabbar/Home/Home"
					})
					uni.showToast({
						title: `${this.userRole === 'student' ? '学生' : '管理员'}登录成功`,
						icon: 'success'
					})
				}, 1500)
			},
			navigateToChange() {
				uni.navigateTo({
					url: "/pages/Change/Change"
				})
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background: linear-gradient(135deg,
				#1a5276 0%,
				#2c3e50 30%,
				#34495e 70%,
				#1a5276 100%);
		position: relative;
		overflow: hidden;
	}

	.scroll-container {
		height: 100vh;
		width: 100%;
	}

	.content-wrapper {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}

	.background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		animation: float 8s ease-in-out infinite;
		filter: blur(25rpx);
	}

	.circle-1 {
		width: 400rpx;
		height: 400rpx;
		top: -150rpx;
		right: -150rpx;
		background: linear-gradient(135deg,
				rgba(26, 82, 118, 0.3),
				rgba(41, 128, 185, 0.2));
		animation-delay: 0s;
	}

	.circle-2 {
		width: 300rpx;
		height: 300rpx;
		bottom: 100rpx;
		left: -100rpx;
		background: linear-gradient(135deg,
				rgba(52, 152, 219, 0.25),
				rgba(26, 82, 118, 0.15));
		animation-delay: 2s;
	}

	.circle-3 {
		width: 250rpx;
		height: 250rpx;
		bottom: -80rpx;
		right: 100rpx;
		background: linear-gradient(135deg,
				rgba(41, 128, 185, 0.2),
				rgba(52, 73, 94, 0.3));
		animation-delay: 4s;
	}

	.circle-4 {
		width: 300rpx;
		height: 300rpx;
		top: 120rpx;
		left: 80rpx;
		background: linear-gradient(135deg,
				rgba(44, 62, 80, 0.25),
				rgba(52, 152, 219, 0.2));
		animation-delay: 6s;
	}

	.particle {
		position: absolute;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		animation: particleFloat 6s ease-in-out infinite;
	}

	.particle-1 {
		width: 20rpx;
		height: 20rpx;
		top: 20%;
		left: 10%;
		animation-delay: 0s;
	}

	.particle-2 {
		width: 15rpx;
		height: 15rpx;
		top: 60%;
		right: 15%;
		animation-delay: 2s;
	}

	.particle-3 {
		width: 25rpx;
		height: 25rpx;
		bottom: 30%;
		left: 20%;
		animation-delay: 4s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) scale(1) rotate(0deg);
		}

		33% {
			transform: translateY(-30rpx) scale(1.05) rotate(120deg);
		}

		66% {
			transform: translateY(15rpx) scale(0.95) rotate(240deg);
		}
	}

	@keyframes particleFloat {

		0%,
		100% {
			transform: translateY(0) translateX(0);
			opacity: 0.2;
		}

		50% {
			transform: translateY(-100rpx) translateX(50rpx);
			opacity: 0.6;
		}
	}

	.logo-section {
		margin-bottom: 40rpx;
		text-align: center;
		position: relative;
		z-index: 2;
		padding-top: 20rpx;
		flex-shrink: 0;
	}

	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo-icon-wrapper {
		background: linear-gradient(135deg,
				#1a5276,
				#2980b9,
				#3498db);
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		box-shadow: 0 15rpx 40rpx rgba(26, 82, 118, 0.5);
		animation: logoPulse 3s ease-in-out infinite;
	}

	@keyframes logoPulse {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}
	}

	.logo-icon {
		font-size: 50rpx;
	}

	.logo-text {
		font-size: 32rpx;
		font-weight: 800;
		color: #ffffff;
		text-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.4);
		letter-spacing: 1rpx;
		margin-bottom: 8rpx;
		background: linear-gradient(135deg,
				#ffffff,
				#e3f2fd,
				#bbdefb);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		line-height: 1.2;
	}

	.logo-subtitle {
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.7);
		font-weight: 300;
		letter-spacing: 2rpx;
		line-height: 1.2;
	}

	.form-card {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 25rpx;
		padding: 50rpx 40rpx;
		box-shadow:
			0 25rpx 80rpx rgba(0, 0, 0, 0.25),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(40rpx);
		width: 100%;
		max-width: 100%;
		position: relative;
		z-index: 2;
		border: 1rpx solid rgba(255, 255, 255, 0.4);
		margin: 0 auto;
		flex-shrink: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.form-header {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.header-decoration {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.decoration-line {
		width: 50rpx;
		height: 3rpx;
		background: linear-gradient(135deg,
				#1a5276,
				#2980b9,
				#3498db);
		border-radius: 2rpx;
		margin: 0 15rpx;
	}

	.title {
		font-size: 42rpx;
		font-weight: 800;
		color: #2c3e50;
		background: linear-gradient(135deg,
				#1a5276,
				#2980b9,
				#2c3e50);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		letter-spacing: 1rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #7f8c8d;
		font-weight: 400;
		letter-spacing: 1rpx;
	}

	.form-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	/* 输入框样式 */
	.input-group {
		margin-bottom: 50rpx;
		width: 100%;
	}

	.input-item {
		display: flex;
		align-items: center;
		background: rgba(248, 249, 250, 0.9);
		border-radius: 20rpx;
		padding: 0 25rpx;
		margin-bottom: 25rpx;
		border: 2rpx solid transparent;
		transition: all 0.4s ease;
		height: 95rpx;
		position: relative;
		overflow: hidden;
		width: 100%;
		box-sizing: border-box;
	}

	.input-item:focus-within {
		border-color: #2980b9;
		background: #ffffff;
		box-shadow: 0 8rpx 30rpx rgba(41, 128, 185, 0.15);
		transform: translateY(-3rpx);
	}

	.input-icon-wrapper {
		background: linear-gradient(135deg,
				#1a5276,
				#2980b9);
		border-radius: 50%;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.input-icon {
		font-size: 28rpx;
		color: #ffffff;
	}

	.input {
		flex: 1;
		height: 95rpx;
		font-size: 28rpx;
		color: #2c3e50;
		background: transparent;
		font-weight: 500;
		min-width: 0;
	}

	.input-underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 2rpx;
		background: linear-gradient(135deg,
				#1a5276,
				#2980b9);
		transition: all 0.4s ease;
		transform: translateX(-50%);
	}

	.input-item:focus-within .input-underline {
		width: 80%;
	}

	.placeholder {
		color: #95a5a6;
		font-size: 28rpx;
	}

	/* 身份选择器样式 */
	.role-selector {
		margin-bottom: 50rpx;
		width: 100%;
	}

	.role-label {
		display: block;
		font-size: 28rpx;
		color: #2c3e50;
		margin-bottom: 20rpx;
		font-weight: 700;
		text-align: center;
	}

	.role-options {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		width: 100%;
	}

	.role-option {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 25rpx 15rpx;
		border: 2rpx solid #e9ecef;
		border-radius: 18rpx;
		background: rgba(248, 249, 250, 0.9);
		transition: all 0.4s ease;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		min-width: 0;
		box-sizing: border-box;
	}

	.role-option.active {
		border-color: #2980b9;
		background: linear-gradient(135deg,
				#1a5276,
				#2980b9);
		box-shadow: 0 10rpx 30rpx rgba(41, 128, 185, 0.3);
		transform: translateY(-5rpx);
	}

	.role-option.active .role-icon,
	.role-option.active .role-text {
		color: #ffffff;
	}

	.role-icon-wrapper {
		margin-bottom: 15rpx;
	}

	.role-icon {
		font-size: 40rpx;
		color: #7f8c8d;
		transition: all 0.4s ease;
	}

	.role-text {
		font-size: 26rpx;
		color: #2c3e50;
		font-weight: 600;
		transition: all 0.4s ease;
		text-align: center;
	}

	.role-check {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		width: 20rpx;
		height: 20rpx;
		border: 2rpx solid #e9ecef;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.4s ease;
	}

	.role-option.active .role-check {
		border-color: #ffffff;
		background: #ffffff;
	}

	.check-dot {
		width: 10rpx;
		height: 10rpx;
		background: #2980b9;
		border-radius: 50%;
		transform: scale(0);
		transition: all 0.4s ease;
	}

	.role-option.active .check-dot {
		transform: scale(1);
	}

	/* 按钮组样式 */
	.button-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 30rpx;
		width: 100%;
	}

	.login-btn {
		background: linear-gradient(135deg,
				#1a5276 0%,
				#2980b9 50%,
				#3498db 100%);
		border: none;
		border-radius: 20rpx;
		height: 95rpx;
		line-height: 95rpx;
		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;
		box-shadow: 0 10rpx 30rpx rgba(41, 128, 185, 0.4);
		transition: all 0.4s ease;
		position: relative;
		overflow: hidden;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
	}

	.login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 5rpx 20rpx rgba(41, 128, 185, 0.4);
	}

	.change-btn {
		background: rgba(255, 255, 255, 0.95);
		border: 2rpx solid #2980b9;
		border-radius: 20rpx;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #2980b9;
		box-shadow: 0 8rpx 25rpx rgba(41, 128, 185, 0.2);
		transition: all 0.4s ease;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		position: relative;
		overflow: hidden;
	}

	.change-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 15rpx rgba(41, 128, 185, 0.2);
		background: rgba(41, 128, 185, 0.05);
	}

	.btn-text {
		color: inherit;
		font-weight: inherit;
	}

	.btn-arrow,
	.btn-icon {
		font-size: 24rpx;
		transition: transform 0.3s ease;
	}

	.login-btn:active .btn-arrow {
		transform: translateX(8rpx);
	}

	.change-btn:active .btn-icon {
		transform: scale(1.1);
	}

	.form-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12rpx;
		padding-top: 25rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		width: 100%;
	}

	.footer-text {
		font-size: 24rpx;
		color: #7f8c8d;
	}

	.footer-link {
		font-size: 24rpx;
		color: #2980b9;
		font-weight: 600;
		text-decoration: none;
	}

	/* 功能特性展示 */
	.features-section {
		margin: 50rpx 0 40rpx;
		padding: 40rpx 30rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 25rpx;
		backdrop-filter: blur(20rpx);
		width: 100%;
		box-sizing: border-box;
	}

	.features-title {
		display: block;
		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.features-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25rpx;
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25rpx 15rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 18rpx;
		transition: all 0.3s ease;
		backdrop-filter: blur(10rpx);
	}

	.feature-item:active {
		transform: translateY(-2rpx);
		background: rgba(255, 255, 255, 0.25);
	}

	.feature-icon {
		font-size: 40rpx;
		margin-bottom: 12rpx;
	}

	.feature-text {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 500;
		text-align: center;
	}

	/* 统计数据 */
	.stats-section {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		padding: 35rpx 0;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 25rpx;
		backdrop-filter: blur(20rpx);
		width: 100%;
		box-sizing: border-box;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		font-size: 32rpx;
		font-weight: 800;
		color: #ffffff;
		margin-bottom: 6rpx;
	}

	.stat-label {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 底部信息 */
	.footer-section {
		text-align: center;
		padding: 40rpx 0 30rpx;
		margin-top: 30rpx;
	}

	.copyright {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 20rpx;
		display: block;
	}

	.footer-links {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}

	.footer-link-item {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.6);
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.content-wrapper {
			padding: 30rpx 20rpx;
		}

		.form-card {
			padding: 40rpx 30rpx;
			border-radius: 20rpx;
		}

		.title {
			font-size: 36rpx;
		}

		.subtitle {
			font-size: 24rpx;
		}

		.logo-text {
			font-size: 30rpx;
		}

		.logo-subtitle {
			font-size: 18rpx;
		}

		.role-options {
			flex-direction: column;
		}

		.role-option {
			flex-direction: row;
			justify-content: flex-start;
			padding: 20rpx 25rpx;
			gap: 15rpx;
		}

		.role-icon-wrapper {
			margin-bottom: 0;
		}

		.role-icon {
			font-size: 36rpx;
		}

		.role-text {
			font-size: 24rpx;
		}

		.login-btn,
		.change-btn {
			height: 85rpx;
			line-height: 85rpx;
			font-size: 28rpx;
		}

		.features-grid {
			grid-template-columns: 1fr;
			gap: 20rpx;
		}

		.stats-section {
			flex-direction: column;
			gap: 25rpx;
			padding: 30rpx 0;
		}

		.footer-links {
			flex-direction: column;
			gap: 12rpx;
		}
	}
</style>